<template>
  <div class="container">
    <el-row style="background-color: #fff;margin-bottom: 12px;">
      <repair-mag-form @parkBoolean="receivePark"
                   @roadBoolean="receiveRoad"
                   @tableLoad="setTableLoad"
                   @tableData="getTableData"
                   :ranNum="ranNum"
                   :park="parkName"
                   :road="roadName"
                   :pageNum="pageNum"
                   :pageSize="pageSize"></repair-mag-form>
    </el-row>
    <el-row style="background-color: #fff">
      <repair-mag-table @addBerth="openAdd"
                    @editBerth="openEdit"
                    @pageNum="setPageNum"
                    @pageSize="setPageSize"
                    @delSearch="tiggerSearch"
                    :tableLoad="tableLoad"
                    :tableData="tableData"></repair-mag-table>
    </el-row>
    <repair-mag-add :addBerthVisible.sync="addBerthVisible"
                :parkName2.sync="parkName2"
                :roadName2.sync="roadName2"
                @openParkAdd="receivePark2"
                @openRoadAdd="receiveRoad2"></repair-mag-add>
    <repair-mag-edit :editBerthVisible.sync="editBerthVisible"
                 :parkName3.sync="parkName3"
                 :editData="editData"
                 :roadName3.sync="roadName3"
                 @editSearch="tiggerSearch"
                 @openParkEdit="receivePark3"
                 @openRoadEdit="receiveRoad3"></repair-mag-edit>
  </div>
</template>
<script>
  import RepairMagAdd from './repairChild/repairMagAdd'
  import RepairMagEdit from './repairChild/repairMagEdit'
  import RepairMagForm from './repairChild/repairMagForm'
  import RepairMagTable from './repairChild/repairMagTable'

  export default {
    components: {
      RepairMagAdd,
      RepairMagEdit,
      RepairMagForm,
      RepairMagTable
    },
    data() {
      return {
        tableData: {},
        editData: [],
        pageNum: 1,
        pageSize: 10,
        tableLoad: false,
        dialogParkVisible: false,
        dialogRoadVisible: false,
        addBerthVisible: false,
        editBerthVisible: false,
        parkLoading: false,
        roadLoading: false,
        ranNum: 0,
        parkType: 0,
        roadType: 0,
        parkName: '',
        parkName2: '',
        parkName3: '',
        roadName: '',
        roadName2: '',
        roadName3: ''
      }
    },
    methods: {
      receivePark: function (val) {
        this.parkType = 1
        this.parkLoading = val
        this.dialogParkVisible = val
      },
      receivePark2: function (val) {
        this.parkType = 2
        this.parkLoading = val
        this.dialogParkVisible = val
      },
      receivePark3: function (val) {
        this.parkType = 3
        this.parkLoading = val
        this.dialogParkVisible = val
      },
      receiveRoad: function (val) {
        this.roadType = 1
        this.roadLoading = val
        this.dialogRoadVisible = val
      },
      receiveRoad2: function (val) {
        this.roadType = 2
        this.roadLoading = val
        this.dialogRoadVisible = val
      },
      receiveRoad3: function (val) {
        this.roadType = 3
        this.roadLoading = val
        this.dialogRoadVisible = val
      },
      selectParkName: function (val) {
        if (this.parkType === 1) {
          this.parkName = val
        } else if (this.parkType === 2) {
          this.parkName2 = val
        } else if (this.parkType === 3) {
          this.parkName3 = val
        } else {
          console.log()
        }
      },
      selectRoadName: function (val) {
        if (this.roadType === 1) {
          this.roadName = val
        } else if (this.roadType === 2) {
          this.roadName2 = val
        } else if (this.roadType === 3) {
          this.roadName3 = val
        } else {
          console.log()
        }
      },
      openAdd: function (val) {
        this.addBerthVisible = val
      },
      openEdit: function (val) {
        this.editData = val[0]
        this.editBerthVisible = val[1]
      },
      /* 执行完操作后触发查询 */
      tiggerSearch: function (val) {
        this.ranNum = val
      },
      setPageNum: function (val) {
        this.pageNum = val
      },
      setPageSize: function (val) {
        this.pageSize = val
      },
      setTableLoad: function (val) {
        this.tableLoad = val
      },
      getTableData: function (val) {
        this.tableData = val
      }
    }
  }
</script>
<style scoped>
  .container {
    padding-top: 16px;
    margin-left: 42px;
    margin-right: 42px;
  }
</style>
